<template>
  <div class="viewbox" v-loading='loading'>
    <div class="full_w cardbox mb_20">
      <div class="full_w flex">
        <div class="imgbox">
          <img :src="img" alt="" class="img" />
        </div>
        <div class="top_right">
          <!-- <div class="m_5">已签收</div> -->
          <div class="m_5" v-if="row.more">{{row.more.province}}{{row.more.city}}{{row.more.area}}{{row.more.address}}</div>
          <div class="m_5">{{row.draw.draw_name}}</div>
        </div>
      </div>
    </div>
    <div class="full_w cardbox mb_20" v-if="row.track_number">
      <template v-if="!activities.length">
        <div class="flexcenter">抱歉，您查询的快递单号暂时没有查询结果！</div>
      </template>
      <template v-else>
        <div class="flexrowbetween border_b">
          <div class="flex aligncenter">
            <img :src="info.ico" alt="" class="imginfo mr_15" />
            <div class="mr_15">{{info.company}}</div>
            <div class="mr_15">{{info.nu}}</div>
          </div>
          <div class="flex">
            <div class="mr_15 commhover c_primary" v-clipboard:copy="info.nu"
                    v-clipboard:success="clipboardSuccess">复制</div>
            <div class="">联系电话：{{info.phone}}</div>
          </div>
        </div>
        <div class="pt_30">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              color="#0bbd87"
            >
              <!-- <span class="pr_15 f-13">{{activity.status}}</span> -->
              <span class="pr_15 f-13">{{ activity.context }}</span>
              <!-- <span class="pr_15 f-13">{{activity.type}}</span> -->
              <span class="f-13">{{activity.time}}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
      </template>
    </div>
    <div v-else class="full_w cardbox mb_20">
      <div class="flexcenter">请填写物流单号</div>
    </div>
  </div>
</template>

<script>
import { selectOrder } from '@/api/hexiao'
export default {
  data() {
    return {
      activities: [
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
        {
          status: "已签收",
          content:
            "[自提柜]已签收，签收人凭取货码签收。感谢使用中通快递及股份有限公司丰巢【自提柜】，期待再次为您服务",
          type: "驳回",
          time: "2016-09-21  08:50:08",
        },
      ],
      img:'',
      info:{},
      loading:false
    };
  },

  created(){
    console.log(this.row)
    this.img = process.env.VUE_APP_BASE_API + "/" + this.row.photo
    if(this.row.track_number){
      this.getInfo()
    }
  },

  props:{
    row:{
      default:{}
    }
  },

  methods: {
    getInfo(){
      this.loading = true
      selectOrder({url:this.row.track_number}).then(res=>{
        this.loading = false
        let data = res.data
        this.info = res.data
        this.activities = data.data
      })
    },

    handleclose() {
      this.$emit("close");
    },

    handleClick() {},

    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    }
  },
};
</script>

<style lang="scss" scoped>
.viewbox {
  max-height: 680px;
  overflow-y: auto;
}
.cardbox {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 20px;
}
.imgbox {
  width: 86px;
  height: 86px;
  img {
    width: 100%;
    height: 100%;
  }
}
.top_right {
  width: calc(100% - 86px);
  padding-left: 20px;
}
.imginfo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.border_b {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.el-timeline{
  padding-left: 0;
}
</style>
// <style lang="scss">
// .appendbg{
//   .el-input-group__append{
//     background-color: #4A73FF;
//     color: white;
//   }
// }
//
</style>